<template>
	<view class="my-personal" ref="uv-back-top">
		<uv-navbar v-if="!screen" title="个人中心" @leftClick="openModal" :placeholder="true"></uv-navbar>
		<headers></headers>
		<el-container>
			<el-aside class="hidden-sm-and-down" width="500px">
				<my :heads="false"></my>
			</el-aside>
			<!--height: calc(100vh - 60px);overflow:auto :title="item.nickname" :note="item.msg"
			:thumb="item.portrait" thumb-size="lg" :rightText="ctime(item.createdAt)" -->
			<view
				style="margin: 5px;padding: 0px 10px;height: 100%;width: 600px;border-radius: 5px;border: 1px solid #eeeeee;background-color: rgba(0, 0, 0, 0);">
				<uv-form style="height: 100%;" labelPosition="left" :model="model1" :rules="rules" ref="form">
					<view
						style="display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center;width: 100%;">
						<view v-for="(itm,idx) in fileList" :key="idx"
							style="position: relative;margin:0px auto;display: flex;justify-content: center;align-items: center;">
							<view class="item_dsh" @click="fileList.splice(idx, 1)">
								<uv-icon color="#FFF" bold name="close"></uv-icon>
							</view>
							<el-image style="height: auto;margin: 0px auto;" :src="itm.url" fit="fit"
								@click="preview(itm.url)"></el-image>
						</view>
						<view style="display: flex;justify-content: center;align-items: center;margin: 0px auto;" v-if="fileList.length<1" class="cursor-pointer"
							@click="prefixclick(1)">
							<view
								style="background-color: #F4F5F7;border-radius: 4px;border: 1px solid #FFAAFF;padding: 25px;">
								<uv-icon style="opacity: 0.4;" name="camera-fill" size="40"></uv-icon>
							</view>
						</view>
						<document maxCount="6" accept="image" uploadText="可以多图,最多6张"
							ref="document1" v-model="fileList" @resdata="parentMethod">
						</document>
					</view>

					<!-- <uploads style="width: 95%;margin:10px auto;" :fileList="fileList" @resdata="parentMethod">
					</uploads> -->
					<uv-text align="center" :text="'ID:'+vuex_user._id" customStyle="margin:10px"></uv-text>
					<uv-form-item label="昵称" prop="nickname" borderBottom>
						<uv-input border="surround" v-model="model1.nickname" clearable></uv-input>
					</uv-form-item>
					<uv-form-item label="生日" prop="birthday" borderBottom @click="open()">
						<uni-datetime-picker type="date" :clear-icon="false" v-model="model1.birthday" />
					</uv-form-item>
					<uv-form-item label="性别" prop="sex" borderBottom>
						<uni-data-select v-model="model1.sex" :localdata="actions"></uni-data-select>
					</uv-form-item>
					<!-- <uv-text lineHeight="40" :customStyle="{fontWeight: 'bold',}" text="兴趣爱好"></uv-text>
			<uv-checkbox-group v-model="hobbyValue">
				<uv-checkbox :customStyle="{marginBottom: '15px',marginRight: '20px'}" v-for="(item, index) in hobby"
					:key="index" :label="item.name" :name="item.name"></uv-checkbox>
			</uv-checkbox-group> -->
					<uv-form-item label="简介" prop="blurb" borderBottom>
						<uv-textarea v-model="model1.blurb" placeholder="请输入内容"></uv-textarea>
					</uv-form-item>

					<uv-text lineHeight="40" :customStyle="{fontWeight: 'bold',}" text="提交"></uv-text>
					<uv-row customStyle="margin-bottom: 10px" justify="space-between" gutter="10">
						<uv-col span="6">
							<uv-button :customStyle="{fontWeight: 'bold',borderRadius: '6px',}" :text="'保 存'"
								@click="submit" color="linear-gradient(to right, #376AB3, #87C0CA)"></uv-button>
						</uv-col>
						<uv-col span="6">
							<uv-button type="primary"
								:customStyle="{fontWeight: 'bold',borderRadius: '6px',color:'#111'}" :text="'返 回'"
								color="linear-gradient(to right, #AED0ED, #e6d9d4)" @click="openModal"></uv-button>
						</uv-col>
					</uv-row>
				</uv-form>
			</view>
		</el-container>
		<uv-toast ref="toast"></uv-toast>
		<uv-modal ref="modal" :title="'返 回'" showCancelButton content='不保存数据, 是否直接退出!'
			@confirm="navigateBack"></uv-modal>
	</view>
</template>

<script>
	// 导入组件
	import {
		modify,
		getUser
	} from '@/common/api.js';
	// import uploads from '@/components/upload/upload.vue';
	import my from '@/pages/my/index'
	import headers from '@/components/header/header.vue';
	import document from '@/components/document/document.vue';
	export default {
		components: {
			// 注册组件
			document,
			headers,
			my,
		},
		data() {
			return {
				model1: {
					birthday: '',
					nickname: '',
					sex: '',
					blurb: ''
				},
				actions: [{
					text: '男',
					value: '男',
				}, {
					text: '女',
					value: '女',
				}, {
					text: '未知',
					value: '未知',
				}],
				hobbyValue: ['阅读', '旅行'],
				hobby: [{
					name: '阅读',
					disabled: false
				}, {
					name: '旅行',
					disabled: false
				}, {
					name: '音乐',
					disabled: false
				}, {
					name: '运动',
					disabled: false
				}],
				fileList: [],
				rules: {
					'birthday': {
						type: 'string',
						required: true,
						message: '请选择生日',
						trigger: ['blur', 'change']
					},
					'nickname': {
						type: 'string',
						required: true,
						message: '请填写昵称',
						trigger: ['blur', 'change']
					},
					'sex': {
						type: 'string',
						required: true,
						message: '请选择性别',
						trigger: ['blur', 'change']
					},
					'blurb': {
						type: 'string',
						required: true,
						message: '请填写简介',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onLoad() {},
		created() {
			this.analysis();
		},
		methods: {
			preview(e) { // 预览图片
				uni.previewImage({
					// current: i,
					urls: [e]
				});
			},
			prefixclick(i) {
				this.$nextTick(() => {
					this.$refs['document' + i].visible();
				});
			},
			analysis() {
				if (this.vuex_user.portrait) {
					this.fileList = [{
						url: this.vuex_user.portrait
					}];
				}
				if (this.vuex_user.birthday) {
					var time = uni.$uv.timeFormat(new Date(this.vuex_user.birthday).getTime(), 'yyyy-mm-dd');
					this.model1.birthday = time;
				}
				if (this.vuex_user.nickname) {
					this.model1.nickname = this.vuex_user.nickname;
				}
				if (this.vuex_user.sex) {
					this.model1.sex = this.vuex_user.sex;
				}
				if (this.vuex_user.blurb) {
					this.model1.blurb = this.vuex_user.blurb;
				}
			},
			submit() {
				var that = this;
				this.$refs.form.validate().then(res => {
					that.$refs.toast.show({
						type: 'loading',
						message: "正在加载"
					});
					modify(that.model1, {
						custom: {
							auth: true,
						},
					}).then(e => {
						// 显示 Toast
						that.getUser();
						uni.$uv.route({
							url: "/pages/my/index",
							intercept(params, next) {
								uni.$uv.toast(e);
								// 模拟处理等待
								setTimeout(() => {
									next(true);
								}, 1000)
							}
						})
					}).catch(e => {
						console.log(e);
					})
				}).catch(errors => {
					console.log(errors);
					this.$refs.toast.show({
						message: "校验失败",
					});
				})
			},
			getUser() {
				getUser({
					custom: {
						auth: true,
						catch: false,
					}
				}).then(e => {
					this.$uv.vuex('vuex_user', e);
					this.analysis();
				}).catch(e => {})
			},
			parentMethod(value) {
				console.log(value);
				this.model1.portrait = value[0].url;
			},
			open() {
				this.linkstate = 'down';
			},
			openModal() {
				this.$refs.modal.open();
			},
			routed(url) {
				var that = this;
				uni.$uv.route({
					url: url,
					// intercept(params, next) {
					// 	that.$refs.toast('跳转中...')
					// 	// 模拟处理等待
					// 	setTimeout(() => {
					// 		next(true);
					// 	}, 1000)
					// }
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.my-personal {
		// background-image: url(../../static/3.jpg);
		background-position: center center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;
		padding: 0px 10px 10px 10px;

		.uv-input {
			padding: 10px;
			margin-bottom: 5px;
			border-radius: 10px;
			background-color: #F4F6F9;
		}

		.uv-button {
			border-radius: 50px;
		}

		::v-deep .uv-cell__body {
			padding: 10px 0px;
		}

		.item_dsh {
			position: absolute;
			z-index: 10;
			top: 0px;
			right: 0px;
			background-color: #000;
			padding: 5px 6px;
			color: #fff;
			border-top-right-radius: 10px;
			border-bottom-left-radius: 10px;
			cursor: pointer;
		}

	}
</style>